import { useState } from 'react';
import { 
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity, 
    View,
    Dimensions,
    ImageBackground
} from 'react-native';
import PageOne from './PageOne';
import PageTwo from "./PageTwo";
import PageThree from "./PageThree";
import PageFour from "./PageFour";
import bac from"../assets/bac2.jpeg"


  const w = Dimensions.get('window').width;
  const h = Dimensions.get('window').height;
  const rw = size=>size/1900*w;
  const rh = size=>size/900*h;

  const BtnA = (props)=>{
    return (
      <TouchableOpacity 
        style={
          {width:rw(250),
            height:rh(60),
            borderBottomColor:'#ebcaac',
            borderBottomWidth:2,
            borderRadius:10,
            
            marginTop:rh(30),
            marginLeft:rw(120),
            
            justifyContent:'center',
            alignItems:'center',
            
          }
        }
        onPress={props.onPress}
      >
        <Text style={{color:'#ebcaac',fontSize:25}}>
          {props.children}
        </Text>
      </TouchableOpacity>
    )
  }
  const BtnI = (props)=>{
    return (
      <TouchableOpacity 
        style={
          {width:rw(250),
            height:rh(60),
            
            borderBottomColor:'#797979',
            borderBottomWidth:2,
            borderRadius:10,
            marginTop:rh(30),
            marginLeft:rw(100),
            
            justifyContent:'center',
            alignItems:'center',  
          }
        }
        onPress={props.onPress}
      >
        <Text style={{color:'#a0a0a0',fontSize:25,}}>
          {props.children}
        </Text>
      </TouchableOpacity>
    )
  }
  // const Page1 =()=>{
  //   return <PageOne />
  // }
  const Page2 =()=>{
    return <PageTwo />
  }

  const Page3=()=>{
    return <PageThree />
  }

  const Page4 =()=>{
    return <PageFour />
  }
export default function Home() {
    const [page,setPage]=useState(1);
    return (
      <ScrollView style={{width:'100%'}}>
          <View class="top" style={styles.top}>
            <ImageBackground source={bac}>
              <Text style={styles.topText}>组队吧后台管理</Text>
            </ImageBackground>
          </View>
          <View class="bottom" style={styles.bottom}>
              <View class='tab' style={styles.tab}>
                  {page==1?<BtnA class='items'>帖子管理</BtnA>:<BtnI class='items' onPress={()=>setPage(1)}>帖子管理</BtnI>}
                  {page==2?<BtnA class='black'>用户管理</BtnA>:<BtnI class='black' onPress={()=>setPage(2)}>用户管理</BtnI>}
                  {page==3?<BtnA class='problems'>问题反馈</BtnA>:<BtnI class='problems' onPress={()=>setPage(3)}>问题反馈</BtnI>}
                  {page==4?<BtnA class='users'>用户举报</BtnA>:<BtnI class='users' onPress={()=>setPage(4)}>用户举报</BtnI>}
              </View>
              <View class='show' style={styles.show}>
                {page==1?<PageOne/>:page==2?<Page2/>:page==3?<Page3/>:<Page4/>}
              </View>
          </View>
      </ScrollView>
    )
}
const styles = StyleSheet.create({
    top:{
        backgroundColor:'#ebcaac',
        width:rw(1900),
        height:rh(60),
    },
    topText:{
         color:'#797979',
         fontSize:rw(35),
         marginLeft:rw(150),
         lineHeight:rh(60)
    },
    bottom:{
        flexDirection:'row',
        backgroundColor:'#FAF7F3'
    },
    tab:{
        width:rw(400),
        height:rh(400),
        flexDirection:'column', 
    },
    show:{
        width:rw(1450)
    },
  });
